.app {
    min-height: 7rem;
    min-width: 13rem;
    background-image: url(../img/menubg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.item {
    width: 2.2rem;
    height: 4rem;
    position: absolute;
    cursor: pointer;
    background-size: 1.4rem,2.24rem; 
}

.info {
    position: absolute;
    top: 0.15rem;
    right: 0.4rem;
    font-size: 0.13rem;
    color: #fff;
    display: flex;
    z-index: 2;
}

.username {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.username>img {
    width: 0.28rem;
    height: 0.28rem;
    margin-right: 0.05rem;
}

.logout {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 0.4rem;
    margin-left: 0.2rem;
}
.logout:hover{
    color: #36bdd0;
}

.item:nth-child(1) {
    background-image: url(../img/item1.png);
    background-position: bottom;
    background-repeat: no-repeat;
    top: 0.2rem;
    left: 0.4rem;
    z-index: 2;
}

.item:nth-child(2) {
    background-image: url(../img/item2.png);
    background-position: bottom;
    background-repeat: no-repeat;
    top: 2rem;
    left: 1.8rem;
}

.item:nth-child(3) {
    background-image: url(../img/item3.png);
    background-position: bottom;
    background-repeat: no-repeat;
    top: 2.8rem;
    left: 4rem;
}

.item:nth-child(4) {
    background-image: url(../img/item4.png);
    background-position: bottom;
    background-repeat: no-repeat;
    top: 2.8rem;
    left: 7rem;
}

.item:nth-child(5) {
    background-image: url(../img/item5.png);
    background-position: bottom;
    background-repeat: no-repeat;
    top: 2rem;
    left: 9.2rem;
}

.item:nth-child(6) {
    background-image: url(../img/item6.png);
    background-position: bottom;
    background-repeat: no-repeat;
    top: 0.2rem;
    left: 10.9rem;
}